<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
	body{overflow:auto;}
  thead tr {background-color: ActiveCaption; color: CaptionText;}
  th, td {vertical-align: top; font-family: "宋体", Arial, Helvetica, sans-serif; font-size: 9pt; padding: 3px; }
  table, td {border: 1px solid silver;}
  table {border-collapse: collapse;}
  thead .col0 {width: 20%;}
  thead .col1 {width: 75%;}
	td.col0{font-size:18px;font-weight:bold;color:#f00;}
</style>
<body class="white-bg">
    <table>
      <thead>
        <tr>
          <th class="col0">章节</th>
          <th class="col1">内容</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col0">3.7 调试方法</td>
          <td class="col1"><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 26pt; font-family: 宋体; font-size: 18px;">在软件开发过程中，掌握了借助开发工具进行软件调试的方法，就可以通过各种调试方法的<span style="font-size: 18px;">应用，更快地定位问题出现的位置，从而有针对性地分析问题、解决问题，软件开发效率能够得 到更大程度的提高。</span></p><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">软件开发的难点在于不会调试、不会排（除）错（误）。所以学会各种调试方法，尤其是 常用的方法并熟练掌握，在软件开发过程中，就能做到事半功倍，否则会把大量的时间消耗在 排错工作上，时间长了，就会丧失信心、失去学习的兴趣和动力。</p>  </td>
        </tr>
        <tr>
          <td class="col0">3.7.1 后端调试</td>
          <td class="col1"><p style="margin: 0pt; padding: 0px 0px 0px 35pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"></span></p><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px;">后端调试需要借助开发平台（编译工具），如&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">MyEclipse</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Eclipse</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Intellij IDEA&nbsp;</span>等，采用 查看日志和断点跟踪等方法。</p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 18px=""><strong><span style="color:#ff0000;">1<span class="s24" style="margin: 0px; padding: 0px; font-family: 楷体, monospace; font-size: 18px;">．查看日志</span></span></strong></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px;">因为添加了&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Log4j&nbsp;</span>日志系统，<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Console&nbsp;</span>控制台会显示很多关于系统启动、运行、停止的日 志信息。在项目启动后，通过查看&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Console&nbsp;</span>中的日志或报错（<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Exception</span>）信息，能解决一部分 突出的问题，如语法错误、数据库配置错误等。查看日志的方法是首先把&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Console&nbsp;</span>窗口右边的 滚动条拖动到最上方；然后从上往下滑动滚动条，找到第&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">1&nbsp;</span>个出现&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Exception</span>（通常是蓝色字） 的位置，然后根据异常出现位置的上下文，分析异常产生的原因，找到解决异常的方法。有时 候会出现很多异常信息，但解决了前面的异常，后面的异常也就不存在了。</p><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">有经验的开发调试人员对于常见的异常一看就知道导致异常的原因和解决方法；对于初 学者来说，需要积累经验，首先是会用网络资源，然后才是问老师（能者为师），因为网络资 源一直都在，而老师不一定能及时响应。</p><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 26pt; font-family: 宋体; font-size: 18px;"><strong><span style="color:#000066;">（<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">1</span>）异常样例&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">1</span>—数据库未启动。</span></strong></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="" line-height:="" 28px="">1<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）现象。图&nbsp;</span>3-24&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">所示是控制台显示的日志，日志中提示有&nbsp;</span>CommunicationsException&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">异 常，原因是&nbsp;</span>Communications link failure<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">。提示信息表明无法连接数据库。</span></p><br /><p style="margin: 0pt; padding: 0px 0px 0px 35pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_041.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p class="s9" style="margin: 0pt; padding: 4pt 0px 0px 5pt; font-family: 宋体; font-size: 9pt; text-align: center;">图&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">3-24 Console&nbsp;</span>日志—<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">CommunicationsException&nbsp;</span>异常</p><p class="s6" style="margin: 0pt; padding: 7pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">2<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">）分析。造成异常的原因可能是配置文件中使用的数据库没有启动运行。</span></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">3<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">）解决。启动数据库，再运行项目。</span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: 宋体; font-size: 18px;"><strong><span style="color:#000066;">（<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">2</span>）异常样例&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">2</span>—数据库配置错误。</span></strong></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">1<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">）现象。图&nbsp;</span>3-25&nbsp;<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">所示是控制台显示的日志，日志中提示有&nbsp;</span>SQLException&nbsp;<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">异常，原因是</span></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 5pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Access denied for user 'root'@'localhost' (using password: NO)<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">。提示信息表明数据库拒绝访问。</span></p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px 0px 0px 19pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_042.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p class="s9" style="margin: 0pt; padding: 4pt 0px 0px 26pt; text-indent: 102pt; font-family: 宋体; font-size: 9pt;">图&nbsp;<span class="p" style="margin: 0pt; padding: 0px; text-indent: 0px; font-family: times new roman serif; font-size: 9pt">3-25 Console&nbsp;</span>日志—<span class="p" style="margin: 0pt; padding: 0px; text-indent: 0px; font-family: times new roman serif; font-size: 9pt">SQLException&nbsp;</span>异常</p><p class="s6" style="margin: 0pt; padding: 7pt 0px 0px 5pt; text-indent: 21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 26px="" text-align:="" justify="">2<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）分析。造成异常的原因可能有：配置文件中数据库名称错误、访问数据库的用户名或 密码有错误。</span></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">3<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">）解决。打开&nbsp;</span>conf/ioc/dao.js<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">，检查并修改其中数据库的配置信息。</span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: 宋体; font-size: 18px;"><strong><span style="color:#000066;">（<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">3</span>）异常样例&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">3</span>—<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Java&nbsp;</span>方法错误。</span></strong></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 4px="" text-align:="" justify="">1<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）现象。图&nbsp;</span>3-26&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">所示是控制台显示的日志，日志中提示有&nbsp;</span>Error<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">，原因是&nbsp;</span>The method lrwcode(String, String) is undefined for the type UserAct<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">，提示信息表明存在编译错误，在&nbsp;</span>UserAct&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">类中未定义方法&nbsp;</span>lrwcode(String,String)<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">。日志中还显示&nbsp;</span>Error&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">产生的位置信息：</span>UserAct.java&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">文 件的第&nbsp;</span>35&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">行，处于&nbsp;</span>doLogin&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">方法内部。</span></p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px 0px 0px 20pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_043.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p class="s9" style="margin: 0pt; padding: 4pt 0px 0px 5pt; font-family: 宋体; font-size: 9pt; text-align: center;">图&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">3-26 Console&nbsp;</span>日志—<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">lang.Error</span></p><p class="s6" style="margin: 0pt; padding: 7pt 0px 0px 5pt; text-indent: 21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 4px="" text-align:="" justify="">2<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）分析。造成这种异常的原因可能有：方法名有误，方法参数有误或者确实没有定义过 提示信息中的方法。</span></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 26px="">3<span class="s5" style="margin: 0px; padding: 0px; font-family: 宋体; font-size: 18px;">）解决。如果方法有误，修改；如果没有定义，添加方法的定义。 不同的开发人员、同一开发人员在不同开发场景，一般都会遇到异常或错误，无法列举</span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; font-family: 宋体; font-size: 18px;">所有可能的问题，所以需要开发人员在开发过程中，不断积累经验。</p><p class="s6" style="margin: 0pt; padding: 2pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt=""><strong><span style="color:#ff0000;">2<span class="s24" style="margin: 0px; padding: 0px; font-family: 楷体, monospace; font-size: 18px;">．断点跟踪</span></span></strong></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 15.82px; text-align: justify;">在&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Java&nbsp;</span>编写的方法中，可以在代码行前面添加断点。以&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">debug&nbsp;</span>模式运行项目，运行到断 点时，可以单步跟踪调试，可以查看前端传来的参数值，可以查看业务处理后的属性值，可以 查看业务处理过程中的异常信息等。学会断点跟踪可以帮助分析问题可能出现在代码的什么位</p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 5pt; font-family: 宋体; font-size: 18px;">置及原因，最终根据原因找出解决方案。</p><p class="s24" style="margin: 0pt; padding: 2pt 0px 0px 26pt; font-family: 楷体, monospace; font-size: 18px;"><span style="color:#ff0000;"><span class="s7" style="margin: 0px; padding: 0px; font-family: 黑体, monospace; font-size: 18px;">注意：</span>不要在&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">MainSetup&nbsp;</span>的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">init&nbsp;</span>方法中加断点，这会导致&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">debug&nbsp;</span>模式启动超过&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">45s</span>。</span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">单步调试有三种方法，根据实际情况选择单步调试方法，在&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">MyEclipse&nbsp;</span>的工具栏上有相应 的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">3&nbsp;</span>个按钮<span style="margin: 0px; padding: 0px; text-indent: 0px;"><img th:src="@{/assets/javaeeimg/Image_044.png}" style="margin: 0px; padding: 0px;" alt="" /></span>及快捷键。</p><p class="s6" style="margin: 0pt; padding: 0px 0px 0px 47pt; text-indent: -21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 26px="" text-align:="" justify=""><span class="s11" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: Wingdings; font-size: 9pt;">?&nbsp;</span>Step Into<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">（</span>F5<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）：单步执行，如果该行有自定义方法，则运行进入自定义方法（不会 进入官方类库的方法）。</span></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 47pt; text-indent: -21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 4px="" text-align:="" justify=""><span class="s11" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: Wingdings; font-size: 9pt;">?&nbsp;</span>Step Over<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">（</span>F6<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）：单步执行，如果当前行有方法调用，这个方法将被执行完毕返回， 然后到下一行。</span></p><p class="s6" style="margin: 0pt; padding: 1pt 0px 0px 47pt; text-indent: -21pt; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="" line-height:="" 15="" 4px="" text-align:="" justify=""><span class="s11" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: Wingdings; font-size: 9pt;">?&nbsp;</span>Step Return<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">（</span>F7<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">）：当单步执行到一个方法的内部，但觉得该方法没有问题，就可 以使用&nbsp;</span>Step Return&nbsp;<span class="s5" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: 宋体; font-size: 18px;">执行完当前方法的余下部分，并返回到该方法被调用处的下一 行语句。</span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">如果想直接执行到下一个断点，单击<span style="margin: 0px; padding: 0px; text-indent: 0px;"><img th:src="@{/assets/javaeeimg/Image_045.png}" style="margin: 0px; padding: 0px;" alt="" /></span><span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Resume</span>，程序将运行当前断点到下一个断点之间 需要执行的代码。如果后面代码没有断点，再次单击该按钮将会执行完程序。</p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 26pt; font-family: 宋体; font-size: 18px;">如果不想再继续，单击<span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_046.png}" style="margin: 0px; padding: 0px;" alt="" /></span><span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Terminate&nbsp;</span>停止项目的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">debug&nbsp;</span>运行。</p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">以用户登录为样例，如图&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">3-27&nbsp;</span>所示，在&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">doLogin&nbsp;</span>方法内的第&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">1&nbsp;</span>行的行号（<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">28</span>）左边空白 处，双击添加一个断点（<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">BreakPoints</span>、双击断点可以取消当前断点）。断点的添加，可以在项 目运行前、也可以在项目运行后。</p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_047.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p class="s9" style="margin: 0pt; padding: 2pt 0px 0px 5pt; font-family: 宋体; font-size: 9pt; text-align: center;"><span style="font-size: 9pt;">图&nbsp;</span><span class="p" style="font-size: 9pt; margin: 0pt; padding: 0px; font-family: " times="" new="" roman="" serif="">3-27&nbsp;</span><span style="font-size: 9pt;">后端断点跟踪</span><br /></p><p class="s5" style="margin: 0pt; padding: 7pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">以&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt=""><strong><span style="color:#000099;">debug&nbsp;</span></strong></span>模式运行当前项目，在浏览器中打开系统的登录页，输入用户名和密码后到系 统；当运行到断点时，断点处显示有一个向左的箭头，表示程序执行到当前行已暂停；按两 次热键&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">F6</span>，程序执行到第&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">30&nbsp;</span>行。单击菜单&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Window&nbsp;</span>茂，选择&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Show View&nbsp;</span>中的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Expressions&nbsp;</span>命令，打开&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 10="" 5pt="">Expressions&nbsp;</span>表达式视图，输入需要查看的属性名、参数名或对象名，就可以看 到它们当前的值。</p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 16.24px; text-align: justify;">如果查看的值，不是预计的值，则要往回查；如果是没有取到前端传过来的参数值，则 甚至要检查前端的业务逻辑。</p>   </td>
        </tr>
        <tr>
          <td class="col0">3.7.2 前端调试  </td>
          <td class="col1"><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 26px;">前端调试需要借助浏览器的开发者工具，如&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">DevTool</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Firebug&nbsp;</span>或者&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Firefox DevTools&nbsp;</span>等。 建议使用&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">360&nbsp;</span>极速浏览器的极速模式，其他国产浏览器的极速模式、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Chrome&nbsp;</span>浏览器等也可以。</p><p class="s6" style="margin: 0pt; padding: 0px 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 18px=""><strong><span style="color:#ff0000;">1<span class="s24" style="margin: 0px; padding: 0px; font-family: 楷体, monospace; font-size: 18px;">．断点跟踪</span></span></strong></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">运行项目，确保控制台没有异常、没有错误。在浏览器中打开项目登录页面，如图&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">3-28&nbsp;</span>所示。调出浏览器的“开发者工具”（大部分浏览器通常用快捷键&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">F12</span>），选择&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Sources&nbsp;</span>面板， 展开左边区域树形资源，选择&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">include/js/login.js</span>，在中间区域&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">login.js&nbsp;</span>的&nbsp;<span class="h1" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-weight:="" bold="" font-size:="" 18px="">javascript&nbsp;</span>代码单击行 号&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">98</span>，即可以添加一个断点，如果单击断点，则是取消该断点。展开右边区域&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Watch</span>，添加</p><p class="s5" style="margin: 0pt; padding: 0px 0px 0px 5pt; font-family: 宋体; font-size: 18px; line-height: 16.24px;">（输入）需要查看的变量、表达式或对象，则可以看到它们在程序执行到断点时的值。可以单 步调试、也可以继续执行到下一断点。</p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px 0px 0px 14pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_048.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p class="s9" style="margin: 0pt; padding: 4pt 0px 0px 4pt; font-family: 宋体; font-size: 9pt; text-align: center;">图&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">3-28&nbsp;</span>前端断点跟踪</p><p class="s5" style="margin: 0pt; padding: 7pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 16.24px; text-align: justify;">如果查看的值，不是预计的值，则要往回查；如果是没有取到后端传过来的值，可能需 要检查后端的业务逻辑。</p><p class="s6" style="margin: 0pt; padding: 0px 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 18px=""><strong><span style="color:#ff0000;">2<span class="s24" style="margin: 0px; padding: 0px; font-family: 楷体, monospace; font-size: 18px;">．查看代码与&nbsp;</span>CSS</span></strong></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">在浏览器开发者工具中打开&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Elements&nbsp;</span>面板，可以查看、查找网页源代码&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">HTML&nbsp;</span>中的任一 元素及其用到的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">js/css/image&nbsp;</span>文件等，如果手动修改任一元素的属性和样式则能实时在浏览器 里面得到反馈，如图&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">3-29&nbsp;</span>所示，当前选中了&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">id&nbsp;</span>为&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">login_form&nbsp;</span>的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">div&nbsp;</span>元素，右边显示了这个元 素上的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">css</span>，可以临时手工调整它的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">css&nbsp;</span>属性和属性值，查看即时反馈的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">UI&nbsp;</span>界面效果，如果觉 得合适，就参照临时修改后的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">css</span>，修改或添加到源文件中。</p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px 0px 0px 30pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_049.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p class="s6" style="margin: 0pt; padding: 9pt 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 18px=""><strong><span style="color:#ff0000;">3<span class="s24" style="margin: 0px; padding: 0px; font-family: 楷体, monospace; font-size: 18px;">．查看网络请求信息</span></span></strong></p><p class="s9" style="margin: 0pt; padding: 4pt 0px 0px; font-family: 宋体; font-size: 9pt; text-align: center;">图&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">3-29&nbsp;</span>查看、修改&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">html&nbsp;</span>代码或&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">css</span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height: 28px; text-align: justify;">在浏览器开发者工具中打开&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Network&nbsp;</span>面板，从发起网页页面请求&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Request&nbsp;</span>后，分析&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">HTTP&nbsp;</span>请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这 个进行网络性能优化。选择一个向后端发起的请求，例如登录&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">doLogin</span>，则可以查看请求 时的&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Headers&nbsp;</span>消息和&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">response&nbsp;</span>的数据消息，如图&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">3-30&nbsp;</span>所示，这是后端服务器响应&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">response&nbsp;</span>的消息。</p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px 0px 0px 30pt; font-family: times new roman serif; font-size: 9pt" line-height:="" 10pt="" text-align:="" center=""><span style="margin: 0px; padding: 0px;"><img th:src="@{/assets/javaeeimg/Image_050.png}" style="margin: 0px; padding: 0px;" alt="" /></span></p><p class="s9" style="margin: 0pt; padding: 4pt 0px 0px 47pt; font-family: 宋体; font-size: 9pt; text-align: center;">图&nbsp;<span class="p" style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt">3-30&nbsp;</span>网络请求信息</p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p style="margin: 0pt; padding: 0px; font-family: times new roman serif; font-size: 9pt"><br style="margin: 0px; padding: 0px;" /></p><p class="s6" style="margin: 0pt; padding: 0px 0px 0px 26pt; font-family: " times="" new="" roman="" serif="" font-size:="" 18px=""><span style="color:#ff0000;"><strong>4<span class="s24" style="margin: 0px; padding: 0px; font-family: 楷体, monospace; font-size: 18px;">．查看所有资源</span></strong></span></p><p class="s5" style="margin: 0pt; padding: 1pt 0px 0px 5pt; text-indent: 21pt; font-family: 宋体; font-size: 18px; line-height:28px;">在浏览器开发者工具中打开&nbsp;<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Application&nbsp;</span>面板，可以看到当前网页加载的所有资源信息， 包括存储数据（<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Local Storage</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Session Storage</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">IndexedDB</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Web SQL</span>、<span class="s6" style="margin: 0px; padding: 0px; text-indent: 0px; font-family: " times="" new="" roman="" serif="" font-size:="" 18px="">Cookies</span>）、缓存数据、 字体、图片、脚本、样式表等。</p>  </td>
        </tr>

		</tbody>
    </table>
<div th:include="include :: footer"></div>
</body>
</html>
